<script setup>
import { useRoute } from 'vue-router'
import Main from './main/index.vue'
import Right from './right/index.vue'
import Top from './top/index.vue'

const route = useRoute()

console.log(`id:${route.params.id}的个人主页`)

const user = ref({
  id: 1,
  nickName: '不如摸鱼去',
  job: '摸鱼大王',
  avatar:
    'https://img2.baidu.com/it/u=1115522663,3151405869&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
})

const main = ref(null)
// main 提供的切换tab方法
function switchTab(name) {
  if (main.value) {
    main.value.toggleTab(name) // Call the exposed method
  }
}
function switchAttentionTab(id) {
  if (main.value) {
    main.value.attentionToggleTab(id) // Call the exposed method
  }
}
</script>

<template>
  <AppPage :main-style="{ marginTop: '20px' }" full>
    <div class="ma max-w-960 wh-full flex">
      <div class="flex-1">
        <Top :user="user" />
        <Main ref="main" />
      </div>
      <div class="mobile-hidden ml-20 max-w-240 flex-1">
        <Right
          :user-id="user.id"
          @switch-tab="switchTab"
          @switch-attention-tab="switchAttentionTab"
        />
      </div>
    </div>
  </AppPage>
</template>

<style scoped>
@media (max-width: 1000px) {
  .mobile-hidden {
    display: none;
  }
}
</style>
